<!--
 * @Author: GuoShuning
 * @Date: 2022-12-15 14:02:11
 * @LastEditors: LiuYan
 * @LastEditTime: 2023-01-14 09:45:40
 * @Description: 
-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./common/css/coommon.css" />
    <script
      src="./common/js/jquery-1.7.2.min.js"
      type="text/javascript"
      charset="utf-8"
    ></script>
    <title>违规记录</title>
  </head>

  <body>
    <div class="supplierViolationRecord_dialog" id="supplierViolationRecord">
      <div class="searchAction">
        <div class="search-group">
          <input type="text" placeholder="请输入..." />
          <button class="button_primary">
            <img src="./common/img/search.png" alt="" />
          </button>
        </div>
        <div>
          <button class="button_primary addBtn" id="editViolation">
            <img src="./common/img/add-full.png" />新增
          </button>
          &ensp;
          <button class="button_primary addBtn" @click="onYouGot">
            <img src="./common/img/add-full.png" />立项申请
          </button>
        </div>
      </div>
      <div class="table">
        <div class="table-header">
          <div class="tr">
            <div class="td" style="width: 15%">违规描述</div>
            <div class="td center" style="width: 15%">违规时间</div>
            <div class="td center" style="width: 15%">创建者</div>
            <div class="td center" style="width: 15%">创建时间</div>
            <div class="td center" style="width: 15%">编辑者</div>
            <div class="td center" style="width: 15%">编辑时间</div>
            <div class="td" style="width: 15%">操作</div>
          </div>
        </div>
        <div class="table-body">
          <div class="tr" v-for="(item,index) in tableList" :key="index">
            <div class="td" style="width: 15%">{{item.name}}</div>
            <div class="td center" style="width: 15%">违规时间</div>
            <div class="td center" style="width: 15%">创建者</div>
            <div class="td center" style="width: 15%">2022-12-19 15:37</div>
            <div class="td center" style="width: 15%">周校民</div>
            <div class="td center" style="width: 15%">2022-12-18 02:10</div>
            <div class="td" style="width: 15%">
              <button class="button_primary_text">编辑</button>
              &ensp;
              <button class="button_error_text">删除</button>
            </div>
          </div>
        </div>
      </div>
      <div class="pageTableCount">共<span> {{total}} </span>条违规</div>
    </div>
    <div id="youGot" style="height: 50vh">
      <iframe
        src="./立项申请.html"
        frameborder="0"
        width="100%"
        height="100%"
        allowtransparency="true"
        style="background-color: transparent"
      ></iframe>
    </div>
    <!-- 新增供应商 --- 涉及品牌 -->
    <div id="supplierViolationEdit">
      <div class="supplierViolationEdit_dialog">
        <div class="input-group">
          <label>违规时间</label>
          <input placeholder="输入关键字" />
        </div>
        <div class="textarea-group">
          <label>违规描述</label>
          <textarea rows="4" placeholder="请输入..."></textarea>
        </div>
        <div class="upload-group">
          <label>上传附件</label>
          <div class="upload_button">
            <div class="upload_out">
              <img src="./common/img/upload_blue.png" alt="" />上传文件
              <input type="file" />
            </div>
            <div class="upload_tip">
              支持扩展名：.rar .zip .doc .docx .pdf .jpg...
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="./common/js/vue.js"></script>
  <script type="module">
    const { createApp } = Vue;
    import DiaLog from "./common/js/diaLog.js";
    createApp({
      data() {
        return {
          tableList: [],
          total: 5,
        };
      },
      //页面初始化加载
      mounted() {
        console.log("页面初始化加载");
        this.getList();
      },
      //所有函数都写在这里
      methods: {
        getList() {
          // ajax 请求
          // $.ajax()
          this.total = 100; //总条数
          this.tableList = [
            {
              name: "违规描述",
            },
          ];
        },
        onYouGot() {
          youGot.show();
        },
      },
    }).mount("#supplierViolationRecord");
    // 新增供应商 --- 涉及品牌
    let showDialogBtn = document.getElementById("editViolation");
    let supplierViolationEditDialog = new DiaLog({
      title: "新增违规记录",
      width: "500px",
      el: "#supplierViolationEdit",
      cancelText: "取消",
      confirmText: "保存",
      zIndex: 102,
      cancel: () => {
        console.log("取消");
        supplierViolationEditDialog.hide();
      },
      confirm: (document) => {
        console.log("保存");
        supplierViolationEditDialog.hide();
      },
    });
    showDialogBtn.addEventListener("click", () => {
      supplierViolationEditDialog.show();
    });
    let youGot = new DiaLog({
      title: "立项申请",
      width: "60%",
      el: "#youGot",
      cancelText: "取消",
      confirmText: "提交申请",
      zIndex: 102,
      cancel: () => {
        console.log("取消");
        youGot.hide();
      },
      confirm: (document) => {
        console.log("保存");
        youGot.hide();
      },
    });
  </script>
</html>
